<template>
  <div>
    <table id="recomend_table" class="table table-striped table-vcenter table-bordered table-condensed table-hover">
      <thead>
      <tr>
        <th v-for="(item,index) in Thead" class="text-center" :key="index">{{item.titleName}}
        </th>
        <th class="text-center">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-if="list" v-for="(list,index) in showList" :key="index">
        <td
          v-for="(item,index) in Thead" class="text-center" :key="index">{{list[item.paramName] || '-'}}
        <td class="text-center">
          <div class="btn-group-xs">
                <span>
                <a  style="text-decoration:underline"
                   class="onClickUpData"
                   @click="updataItem(list)">更新</a>
                </span>
            <span>
                  <a style="text-decoration:underline"
                     class="onClickDelete"
                        @click="deleteItem(list)"
                     >删除</a>
                </span></div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  // import Hello from './components/Hello'

  export default {
    data () {
      return {}
    },
    props: {

      Thead: {
        type: Array,

        default: () => [
          {titleName: '分类名称', paramName: ''},
          {titleName: '资源位', paramName: ''},
          {titleName: '资源名称', paramName: ''},
          {titleName: '资源类型', paramName: ''},
          {titleName: '更新日期', paramName: ''},
        ]
      },
      showList: {
        type: Array,
        default: () => []
      }
    },
    components: {},
    methods: {
      updataItem (item) {
        this.$emit('updataItem', item)
      },
      deleteItem (item) {
        this.$emit('deleteItem',item)
      },

    }
  }
</script>

<style scoped>

  table {
    border-collapse: collapse;
    font-family: "宋体" !important;
  }

  .btn-primary {
    background-color: #3876af;
    border-color: #306ca4;
    color: #fff;
  }

  .table-options {
    display: table;
    width: 100%;
    margin: 0 0 6px;
    border-bottom: 1px dotted #ddd;
    padding: 0 0 6px;
  }

  .thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
  }

  .tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
  }

  .table-bordered {
    border: 1px solid #ddd;
  }

  .table thead > tr > th {
    border: 1px solid #ddd;
    background: #b5d1f5 !important;
    padding: 3px 8px;
    white-space: nowrap;
    font-weight: 400;
  }

  bordered > thead > tr > th {
    border: 1px solid #ddd;
  }

  .table-bordered > tbody > tr > td {
    border: 1px solid #ddd;
  }

  .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f2f2f2;
  }

  tr {
    border-color: inherit;
  }
</style>
